<template>
  <div>
    <div class="toptitle">
      <!-- 搜索区域 -->
      <van-search
        placeholder="请输入商户名或菜名"
        show-action
        shape="round"
        v-model="keyword"
        @focus="onSearch"
        @cancel="gotoHome"
      />
      <!-- 顶部榜单tab -->
      <van-tabs
        title-active-color="#fecb2f"
        swipeable
        color="#fecb2f"
        v-model="topNavValue"
        class="top-tab"
      >
        <van-tab>
          <div slot="title">
            <van-icon
              :name="topNavValue === 0 ? require('../assets/icon/search_qb_icon.png') : require('../assets/icon/search_qb1_icon.png')"
            />全部
          </div>
        </van-tab>
        <van-tab>
          <div slot="title">
            <van-icon
              :name="topNavValue === 1 ? require('../assets/icon/search_dp1_icon.png') : require('../assets/icon/search_dp_icon.png')"
            />点评
          </div>
        </van-tab>
        <van-tab>
          <div slot="title">
            <van-icon
              :name="topNavValue === 2 ? require('../assets/icon/search_dr1_icon.png') : require('../assets/icon/search_dr_icon.png')"
            />达人
          </div>
        </van-tab>
      </van-tabs>
      <!-- 下拉菜单 -->
      <van-dropdown-menu :class="show ? 'menu-dropItems-active': ''" class="menu-dropItems">
        <van-dropdown-item
          v-model="queryInfo.regionName"
          :title="regionMenuItem.title"
          :options="regionMenuItem.options"
          @change="onMenuItemChange"
        ></van-dropdown-item>
        <van-dropdown-item
          v-model="queryInfo.categoryName"
          :title="categoryMenuItem.title"
          :options="categoryMenuItem.options"
        ></van-dropdown-item>
        <van-dropdown-item
          v-model="queryInfo.sortField"
          :title="sortMenuItem.title"
          :options="sortMenuItem.options"
        ></van-dropdown-item>
        <van-dropdown-item :title="filterMenuItem.title"></van-dropdown-item>
      </van-dropdown-menu>
      <!-- 火锅类型 -->
      <div class="TypesOf">
        <van-tag round size="large" color="#eee">火锅排行榜</van-tag>
        <van-tag round size="large" color="#eee">四川火锅</van-tag>
        <van-tag round size="large" color="#eee">串串火锅</van-tag>
        <van-tag round size="large" color="#eee">重庆火锅</van-tag>
      </div>
    </div>
    <div class="Listregion">
      <!-- 商品列表区域 -->
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-card
          v-for="item in list"
          :key="item.id"
          :thumb="item.images"
          @click="toStoreDetailPage(item.id)"
        >
          <b slot="title" class="item-store-title">
            {{item.name}}
            <van-icon :name="require('../assets/icon/search_t_icon.png')" size="14" />
          </b>
          <div slot="tags">
            <!-- 评价和价格区域 -->
            <div class="Evaluation">
              <van-rate v-model="item.score" size="12px" />
              <span>{{item.commentCount}}条</span>
              <span>¥{{item.money}}/人</span>
            </div>
            <!-- 地址区域 -->
            <div class="flex-row-center">
              <span class="address">{{item.addressName}}&nbsp;{{item.categoryName}}</span>
              <span>{{item.distance | distanceFilter}}</span>
            </div>
            <!-- 口味榜单区域 -->
            <div class="Taste">
              <van-tag plain>94%认为口味很赞</van-tag>
              <van-tag class="Taste_r" plain>九里堤美食热门榜第10名</van-tag>
            </div>
            <!-- 优惠券及团购价 -->
            <div>
              <div class="Voucher">
                <van-icon
                  :name="require('../assets/icon/search_j_icon.png')"
                  text-color="#fff"
                  color="#ff4522"
                />&nbsp;39.9元 价值50元的代金券1张
              </div>
              <div class="Package">
                <van-icon
                  :name="require('../assets/icon/search_t_icon.png')"
                  text-color="#fff"
                  color="#ffcc01"
                />&nbsp;89元 特惠双人餐,148元 爆款四人餐
              </div>
            </div>
          </div>
        </van-card>
      </van-list>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      loading: false,
      finished: false,
      topNavValue: 0,
      total: 3,
      totalPages: 1,
      queryInfo: {
        keywords: "",
        regionName: "all",
        categoryName: "all",
        addressGPS: "",
        Highlight: "false",
        sortField: "score",
        sortRule: "ASC",
        page: 1
      },
      // 搜索店铺结果数据
      list: [
        {
          name: "火锅",
          id: 0,
          categoryName: "四川火锅",
          score: 1,
          money: 120,
          images:
            "https://cn.bing.com/th?id=OIP.X7iXFizvcJzITfclGGSfWwHaGk&pid=Api&rs=1",
          distance: 850,
          addressName: "金牛区蜀西路33号",
          commentCount: 124
        }
      ],
      // 筛选区域数据
      regionMenuItem: {
        title: "全部商区",
        options: [{ text: "全部商区", value: "all" }]
      },
      categoryMenuItem: {
        title: "全部分类",
        options: [
          { text: "全部分类", value: "all" },
          { text: "美食", value: "foods" },
          { text: "购物", value: "shopping" }
        ]
      },
      sortMenuItem: {
        title: "智能排序",
        options: [
          { text: "智能排序", value: "ai" },
          { text: "距离优先", value: "distance" },
          { text: "人气优先", value: "rinki" },
          { text: "好评优先", value: "score" },
          { text: "低价优先", value: "price_low" },
          { text: "高价优先", value: "price_high" }
        ]
      },
      filterMenuItem: {
        title: "筛选",
        options: [
          { text: "全部分类", value: 0 },
          { text: "美食", value: 1 },
          { text: "购物", value: 2 }
        ]
      },
      activeValue: "",
      keyword: ""
    };
  },
  methods: {
    onSearch() {
      this.$router.push({
        path: "/search",
        query: {
          keyword: this.keyword
        }
      });
    },
    toStoreDetailPage(id) {
      this.$router.push({
        path: "/store/detail",
        query: {
          storeId: id
        }
      });
    },
    onLoad() {
      this.queryInfo.page++;
      this.getMenuList();
    },
    async getMenuList() {
      const { data: res } = await this.$http.get("/search", {
        params: this.queryInfo
      });
      this.loading = false;
      if (res.meta.status !== 20000) {
        return this.$toast.error("失败");
      }
      if (res.data.rows.length < 0) {
        this.finished = true;
      }
      this.list = [...this.list, ...res.data.rows];
    },
    onMenuItemChange(value) {
      this.queryInfo.page = 1;
      this.getMenuList();
    },
    gotoHome() {
      this.$router.push("/home");
    }
  },
  created() {
    this.queryInfo.addressGPS = this.$store.state.position;
    this.keyword = this.$router.history.current.query.keyword;
  }
};
</script>

<style lang="less" scoped>
.item-store-title {
  font-size: 18px;
}
.TypesOf {
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}
.TypesOf .van-tag {
  margin: 16px 6px 0 6px;
  padding: 6px 12px 6px 12px;
  color: #000;
  font-size: 13px;
}

.van-card {
  background-color: #fff;
  border-bottom: 1px solid #eee;
}
.van-card .van-card__title {
  font-size: 16px;
  font-weight: 700;
}
.Evaluation {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 10px 0 10px 0;
}
.Evaluation span {
  margin-left: 8px;
}
.address {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.Taste {
  margin-top: 8px;
}
.Taste_r {
  margin: 0 0 8px 6px;
}
.Voucher,
.Package {
  margin-top: 5px;
}
</style>
